
<script lang="ts" setup>
import StockTabel from "../components/StockTable.vue"
import SearchStock from "../components/SearchStock.vue"
import Pagination from "../components/Pagination.vue"
import {ref, reactive} from 'vue'

import { getMateList } from "../api/api.js"

// 分页参数
const page_limit = [10, 20, 50, 100, 200]
// 当前数据总数
const total_rows = ref(0)

// 库位数据
const tableData = ref()

// 查询数据
const queryParam = reactive({
    shelf_id: "", 
    save_id: "", 
    part_num: "",
    start: 0,
    limit: page_limit[0]
})


const getdata = () => {
    getMateList(queryParam).then(function (response: any) {
        tableData.value = response.data
        total_rows.value = response.rows
    })
    .catch(function (error) {
    })
};
getdata()

function receiveStockData(data) {
    // 搜索参数，分页参数重置为第一页
    // console.log(data);
    // console.log(data.shelf_id, data.save_id, data.part_num);
    queryParam.shelf_id = data.shelf_id
    queryParam.save_id = data.save_id
    queryParam.part_num = data.part_num
    queryParam.start = 0
    queryParam.limit = page_limit[0]
    
    getdata()
}

function receiveStockDataByPagination(data) {
    // 分页搜索
    queryParam.shelf_id = data.shelf_id
    queryParam.save_id = data.save_id
    queryParam.part_num = data.part_num
    queryParam.start = data.start
    queryParam.limit = data.limit
    getdata()
}

function refresh() {
    setTimeout(() => {
        getdata()
    }, 1500);
}

</script>

<template>
    <SearchStock @some-event="receiveStockData" :queryParam="queryParam"/>
    <StockTabel :tableData="tableData" @refreshStock="refresh"/>
    <Pagination @some-event="receiveStockDataByPagination" :total_rows="total_rows" :queryParam="queryParam" :page_limit="page_limit"/>
</template>
